#layout {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-areas:
        "ScavengerHunt ScavengerHunt ScavengerHunt"
        "CarlPoppa CarlPoppa cords"
        "NothingGoldCanStay NothingGoldCanStay accidents"
        "NothingGoldCanStay NothingGoldCanStay grossing"
        "haka ThisIsFine grossing";
    width: 60%;
    height: auto;
}

.ScavengerHunt {
    display: flex;
    flex-direction: row;
    flex-flow: reverse;
    grid-area: ScavengerHunt;
    font-size: 30px;
    justify-content: center;
    align-items: center;
}

.CarlPoppa {
    display: flex;
    grid-area: CarlPoppa;
    justify-content: center;
    align-items: center;
    height: 120px;
    width: 100%;
}

.cords {
    display: flex;
    flex-direction: row;
    flex-flow: reverse;
    grid-area: cords;
}

.NothingGoldCanStay {
    display: flex;
    flex-direction: row;
    flex-flow: reverse;
    grid-area: NothingGoldCanStay;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.accidents {
    display: flex;
    flex-direction: row;
    flex-flow: reverse;
    grid-area: accidents;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: auto;
    
}

.haka {
    display: flex;
    flex-direction: row;
    flex-flow: reverse;
    grid-area: haka;
    width: 100%;
    height: auto;
}

.ThisIsFine {
    display: flex;
    flex-direction: row;
    flex-flow: reverse;
    grid-area: ThisIsFine;
    height: auto;
    width: 100%;
}

.grossing {
    display: flex;
    flex-direction: column;
    flex-flow: reverse;
    grid-area: grossing;
}

#layout > * {
    border: black 1px solid;
}